<template>
  <div>
      <div class="tags">
                       <ul>
                         <li class="tags-li" v-for="item in tagsList" :key='item.path' >
                          <router-link :to="item.path" class="tags-li-title">
                            {{item.title}}
                          </router-link>
                           <span class="tags-li-icon" @click="handleClick(item.path)"><i class="el-icon-close"></i></span>
                         </li>
                       </ul>

                     </div>
  </div>
</template>

<script>


export default {
    data(){
        return{
            
            tagsList:[],
            
        }
    },
    created(){
        this.tagsList = this.$store.state.tagsList
        
    },
    methods:{
        handleClick(path){
            if(this.$store.state.tagsList.length > 1){
                for(let i=0;i<this.$store.state.tagsList.length;i++){
                if(this.$store.state.tagsList[i].path === path){
                    let j = i;
                    if(j-1>=0){
                        this.$router.push(this.$store.state.tagsList[j-1].path)
                        this.$store.commit('removeTag', path)
                    }else{
                        this.$router.push(this.$store.state.tagsList[j+1].path)
                        this.$store.commit('removeTag', path)
                    }
                }
            }
            }
        },
       handleTags(command){
                command === 'other' ? this.closeOther() : this.closeAll();
            },
            closeAll(){
                
                this.$router.push('/first');
                this.tagsList = [];
                
            },
           
        

    }
}
</script>

<style>
    .tags {
        position: relative;
        height: 30px;
        overflow: hidden;
        background: #fff;
        padding-right: 120px;
        box-shadow: 0 5px 10px #ddd;
    }

    .tags ul {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .tags-li {
        float: left;
        margin: 3px 5px 2px 3px;
        border-radius: 3px;
        font-size: 12px;
        overflow: hidden;
        cursor: pointer;
        height: 23px;
        line-height: 23px;
        border: 1px solid #e9eaec;
        background: #fff;
        padding: 0 5px 0 12px;
        vertical-align: middle;
        color: #666;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }

    .tags-li:not(.active):hover {
        background: #f8f8f8;
    }

    .tags-li.active {
        color: #fff;
    }

    .tags-li-title {
        float: left;
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
        color: #666;
    }

    .tags-li.active .tags-li-title {
        color: #fff;
    }

    .tags-close-box {
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding-top: 1px;
        text-align: center;
        width: 110px;
        height: 30px;
        background: #fff;
        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
        z-index: 10;
    }

</style>



